<template>
  <div ref="playWndBox">
    <div
      id="playWnd"
      class="playWnd"
      style="width: 1500px; height: 934px; overflow: auto"
    ></div>
  </div>
</template>

<script setup>
const route = useRoute();

//下方为海康视频播放器所需变量
const oPlugin = ref();
const time = ref(0);
async function getScript() {
  const { JSPlugin } = window;
  oPlugin.value = new JSPlugin({
    szId: "playWnd", // 当前的视频播放的节点，需要英文字母开头，必填
    szBasePath: "/", // 这里必须指向h5player.min.js文件 把这个文件再放在src里面的一个文件夹中，因为放置在public的文件这里指向不到
    openDebug: true,
    // 分屏播放
    iMaxSplit: 1,
    iCurrentSplit: 1,
    // 设置样式
    oStyle: {
      border: "#FFF",
      borderSelect: "#FFCC00",
      background: "#000",
    },
  });
  await initPlugin();
}
// 事件初始化
function initPlugin() {
  oPlugin.value.JS_SetWindowControlCallback({
    windowEventSelect(iWindIndex) {
      // 插件选中窗口回调
      console.log("windowSelect callback: ", iWindIndex);
    },
    pluginErrorHandler(iWindIndex, iErrorCode, oError) {
      // 插件错误回调
      console.error(`window-${iWindIndex}, errorCode: ${iErrorCode}`, oError);
    },
    windowEventOver(iWindIndex) {
      // 鼠标移过回调
      console.log("鼠标移过回调", iWindIndex);
    },
    windowEventOut(iWindIndex) {
      // 鼠标移出回调
      console.log("鼠标移出回调", iWindIndex);
    },
    windowFullCcreenChange(bFull) {
      // 全屏切换回调
      console.log("全屏切换回调", bFull);
    },
    firstFrameDisplay(iWndIndex, iWidth, iHeight) {
      // 首帧显示回调
      console.log("首帧显示回调", iWndIndex, iWidth, iHeight);
    },
    performanceLack(iWndIndex) {
      // 性能不足回调
      console.log("性能不足回调", iWndIndex);
    },
  });
  realplay();
}
//   // 播放初始化
function realplay() {
  const videoUrl = route.query.videoUrl;
  oPlugin.value
    .JS_Play(
      videoUrl, //视频地址链接
      {
        playURL: videoUrl, // 流媒体播放时必传
      },
      1 //这个应该是视频下标吧
    )
    .then(
      (res) => {
        console.log(res, "播放成功");
      },
      (err) => {
        console.log(err, "播放失败");
      }
    );
}
onMounted(async () => {
  time.value = setInterval(() => {
    const { _malloc } = window;
    if (_malloc) {
      getScript();
      clearInterval(time.value);
    }
  }, 100);
});
</script>
